<template>
  <view>
    <view v-for="(item,index) in themeConfig" :key="item.themeCode" class="dhcc-padding-wrap" @click="changeRadio(item, index)">
      <dhcc-radio :name="item.themeName" :value="item.themeCode" :checked="index === current" />
    </view>
  </view>
</template>

<script>
import themeJs from '@/theme/theme.js'
import dhccRadio from '@/components/radio/radio'
export default {
  name: 'ThemeSwitch',
  components: {
    dhccRadio
  },
  props: {},
  data() {
    return {
      themeConfig: [
        { themeCode: 'default-theme', themeName: '切换至默认主题' },
        //{ themeCode: 'light-theme', themeName: '切换至明亮主题' },
        //{ themeCode: 'dark-theme', themeName: '切换至暗黑主题' },
        { themeCode: 'lament-theme', themeName: '切换至哀悼模式' }
      ],
      current: 0
    }
  },
  created() {
    this.themeConfig.forEach((item, index) => {
      if (item.themeCode === this.$store.state.themeName) {
        this.current = index
      }
    })
  },
  methods: {
    changeRadio(activeItem, activeIndex) {
      this.$store.commit('setTheme', activeItem.themeCode)
      themeJs.setTheme(activeItem.themeCode)
      this.current = activeIndex
    }
  }
}
</script>

<style>
</style>
